{% extends "base.html" %}

{% block cssextend %}
    <style>
        ::-webkit-scrollbar {
            width: 12px;
            height: 12px;
            background-color: #fff;
            /*transition:width 2s;
            -webkit-transition:width 2s;*/
        }

        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
            border-radius: 6px;
            background-color: #fff;
        }

        ::-webkit-scrollbar-thumb {
            height: 60px;
            border-radius: 6px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
            background-color: #eee;
        }

        /*::-webkit-scrollbar:hover {
            width: 15px;
        }*/

        ::-webkit-scrollbar-thumb:hover {
            background-color: #ccc;
        }

        /* .nav-link.active {
            background-color: #38f !important;
        } */

        .statistic-chart-1 {
            position: relative;
        }
        .rs-select2--light.rs-select2--md {
            position: absolute;
            top: 30px;
            right: 12px;
            margin-top: 5px; /* 调整与 nav 的对齐 */
        }
    </style>
{% endblock %}
    
{% block content %}
    <!-- DATA TABLE-->
    <section class="p-t-20">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <!--h3 class="title-5 m-b-35"></h3-->
                    <div class="table-data__tool">
                        <div class="table-data__tool-left" style="display: none">
                        </div>
                        <!--div class="table-data__tool-right">
                            <button class="au-btn au-btn-icon au-btn--blue au-btn--small">导出</button>
                        </div-->
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="statistic-chart-1" style="padding-right: 20px; ">
                        <ul class="nav nav-pills mb-3" role="tablist">
							<li class="nav-item">
								<a class="nav-link nav-title navtab" href="#" group="rsi_trend" role="tab" target="navtab-grp-drt">日级RSI趋势判断总览</a>
							</li>
							<li class="nav-item">
								<a class="nav-link nav-title navtab" href="#" group="rsi_trend" role="tab" target="navtab-grp-wrt">周级RSI趋势判断总览</a>
							</li>
						</ul>
       
                        <div class="rs-select2--light rs-select2--md" >
                            <div class="input-group navtab-grp-drt">
                                <select class="form-control form-control-sm" style="width: 114px;" data-field="daily_trend_date_select">
                                </select>
                                <button class="form-control form-control-sm" data-table="#RSITrendView">
                                    <i class="fas fa-download m-r-10"></i>
                                </button>
                                <div class="dropDownSelect2">
                                </div>
                            </div>

                            <div class="input-group navtab-grp-wrt">
                                <select class="form-control form-control-sm" style="width: 114px;" data-field="weekly_trend_date_select">
                                </select>
                                <button class="form-control form-control-sm" data-table="#RSITrendView">
                                    <i class="fas fa-download m-r-10"></i>
                                </button>
                                <div class="dropDownSelect2"></div>
                            </div>
                            
                        </div>
                        <!--h3 class="title-3 m-b-30">RSI趋势判断总览</h3-->
                        <hr>
                        <div class="table-responsive table-data" style="height: 360px">
                            <table class="table table-top-campaign" id="RSITrendView">
                                <thead>
                                    <tr>
                                        <td>代码</td>
                                        <td>名称</td>
                                        <td>行业</td>
                                        <td style="color: #666">交集类别</td>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="statistic-chart-1" style="padding-right: 20px;">
                        <h3 class="title-3 m-b-30">周期数据分析</h3>
                        <hr>
                        <div id="lineChart" style="height: 360px">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- END DATA TABLE-->
{% endblock %}


{% block jsscript %}
    <script>
        fetch('/api/trend_date_select_data?period=1&all=true').then(
            response => response.json()
        ).then(responseData => {
            responseData.rows.sort((a, b) => new Date(b) - new Date(a));

            for (var dailyDate of responseData.rows) {
                $('.navtab-grp-drt select').append(`
                    <option value="${dailyDate}">${dailyDate}</option>
                `);
            }
        });

        fetch('/api/trend_date_select_data?period=2&all=true').then(
            response => response.json()
        ).then(responseData => {
            responseData.rows.sort((a, b) => new Date(b) - new Date(a));

            for (var weeklyDate of responseData.rows) {
                $('.navtab-grp-wrt select').append(`
                    <option value="${weeklyDate}">${weeklyDate}</option>
                `);
            }
        });

        function loadRSITrendView(){
            const target = window.localStorage.getItem('rsia:select:navtab:rsi_trend');
            if (target == null || target == 'navtab-grp-drt') {
                var period = 1;
                var fdate = $('.navtab-grp-drt select').val() || '';
            } else {
                var period = 2;
                var fdate = $('.navtab-grp-wrt select').val() || '';
            }
            fetch(`/api/trend_list_data?period=${period}&fdate=${fdate}`).then(
                response => response.json()
            ).then(responseData => {
                $('#RSITrendView tbody').html('');

                for (var stock_info of responseData.rows) {
                    $('#RSITrendView tbody').append(`
                        <tr>
                            <td>${stock_info.scode}</td>
                            <td>${stock_info.sname}</td>
                            <td>${stock_info.industry}</td>
                            <td class="filter-field">${stock_info.mixed.join('')}</td>
                        </tr>
                    `);
                }
            });
        }

        $('.navtab-grp-wrt select').change(loadRSITrendView);
        $('.navtab-grp-drt select').change(loadRSITrendView);

        $(document).ready(function() {
            // 点击事件处理
            $('.navtab').click(function(e) {
                e.preventDefault();

                var target = $(this).attr('target');
                
                window.localStorage.setItem('rsia:select:navtab:rsi_trend', target);

                loadRSITrendView();
                
                // 移除同组navtab的title-2类，并隐藏对应的target
                $('.navtab[group="rsi_trend"]').removeClass('title-2');
                $('.navtab[group="rsi_trend"]').each(function (idx, object){
                    var hideTarget = $(object).attr('target');
                    $('.' + hideTarget).hide();
                })
                
                // 给当前点击的navtab添加title-2类，并显示对应的target
                $(this).addClass('title-2');
                $('.' + target).show();
            });

            var target = window.localStorage.getItem('rsia:select:navtab:rsi_trend');
            var tab = $('.navtab[group="rsi_trend"][target="' + target + '"]');
            if (target == null || tab.length == 0) {
                $('.navtab[group="rsi_trend"]').first().click();
            } else {
                tab.click();
            }
            
        });

        (function ($) {
            try {
                // 获取容器
                var chartDom = document.getElementById('lineChart');
                var myChart = echarts.init(chartDom, 'zh-CN');
                
                // 日期、数量列表
                var historyDates = [];
                var historyAnalysis = [];

                // 数据预处理函数
                function processData(transformer) {
                    return historyAnalysis.map((mat, i) => [
                        historyDates[i],
                        transformer(mat)
                    ]);
                }

                fetch('/api/struct_history_data?all=true').then(
                    response => response.json()
                ).then(responseData => {
                    // 原始数据
                    // var historyDates = [{% for d in historyDates %}"{{ d | date:'Y-m-d' }}",{% endfor %}];
                    // var historyAnalysis = [{% for d in historyAnalysis %}{{ d }},{% endfor %}];
                    
                    responseData.rows.sort((a, b) => new Date(a[0]) - new Date(b[0]));
                    for (var rowData of responseData.rows) {
                        historyDates.push(rowData[0]);
                        historyAnalysis.push(rowData[1]);
                    }

                    // 系列配置
                    var series = [
                        {
                            name: 'R1',
                            type: 'line',
                            data: processData(mat => mat[0] + mat[1]),
                            areaStyle: { color: 'rgba(0, 123, 255, 0.95)' },
                            itemStyle: { color: 'rgba(0, 123, 255, 0.9)' }
                        },
                        {
                            name: 'R3',
                            type: 'line',
                            data: processData(mat => mat[2]),
                            areaStyle: { color: 'rgba(0, 123, 255, 0.35)' },
                            itemStyle: { color: 'rgba(0, 123, 255, 0.3)' }
                        },
                        {
                            name: 'R4',
                            type: 'line',
                            data: processData(mat => mat[3]),
                            areaStyle: { color: 'rgba(255, 123, 0, 0.35)' },
                            itemStyle: { color: 'rgba(255, 123, 0, 0.3)' }
                        },
                        {
                            name: 'R6',
                            type: 'line',
                            data: processData(mat => mat[4] + mat[5]),
                            areaStyle: { color: 'rgba(255, 123, 0, 0.95)' },
                            itemStyle: { color: 'rgba(255, 123, 0, 0.9)' }
                        }
                    ];
            
                    // 配置选项
                    var option = {
                        legend: {
                            top: 20,
                            textStyle: {
                                fontFamily: 'Poppins, sans-serif'
                            }
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'time',
                        },
                        yAxis: { type: 'value' },
                        dataZoom: [{
                            type: 'inside',
                            filterMode: 'none',
                            xAxisIndex: 0,
                            zoomLock: false,
                            start: 100 - 10000 / 3600,
                            end: 100,
                            // minValueSpan: 30 * 24 * 3600 * 1000 // 最小显示30天
                        }],
                        series: series,
                        grid: {
                            containLabel: true,
                            top: -10,
                            left: 0,
                            right: 10,
                            bottom: 0
                        },
                    };
            
                    // 响应式
                    myChart.setOption(option);
                    window.addEventListener('resize', () => myChart.resize());
                })
            } catch (error) {
                console.log(error);
            }
        })(jQuery);
    </script>
{% endblock %}